JS改变input元素的value值之后如何使v

2024-06-24 07:35| 来源: 网络整理| 查看: 265

双向绑定

不管是Angular还是Vue，他们的表单的双向绑定无非做了两件事，一件是接收输入的数据并赋值给元素的value属性，一件是监听input/change等事件，然后将$event.target.value赋值给绑定的值。这样就实现了基本的view-model和model-view的双向绑定。

输入+输出===双向绑定

总结为代码就是：

在Angular里面：

简写为语法糖的话：

在Vue里面:

现在试想，如果我们触发数据改变的方法不是通过用户输入，而是通过在JS里改变，比如下面这样：

html js: let element=document.getElementById('nameEl'); element.target.value="xxxxxxx";

现在我们会发现我们绑定的name变量没有发生改变，原因很简单，我们没有触发任何输出的事件。

我们目前遇到这种场景是因为在拖拽结束的时候，需要改变目标元素的值为我们拖拽的这个元素的内容，这个事情必须在JS里来完成。

拖拽元素

拖拽元素的时候，被拖拽元素会触发以下事件

dragstartdragdragend

目标元素会触发以下事件

dragenterdragoverdragleavedrop

这个场景只是很多情况中的一个，我们为什么不直接在拖拽结束的时候将value赋值给绑定的变量呢？比如：

source.ondragend = function(evt){ this.name=evt.target.text; }

因为绑定的这个变量可能没这么简单，他可能是根据数组或者其他数据结构动态渲染出来的，这样我们不太方便直接操作绑定的那个变量。

那我们使用 element.target.value这种方式，如何才能触发绑定的name也跟着改变呢。答案是我们可以使用dispatchEvent派发事件。

什么是dispatchEvent

向一个指定的事件目标派发一个事件, 并以合适的顺序同步调用目标元素相关的事件处理函数。标准事件处理规则(包括事件捕获和可选的冒泡过程)同样适用于通过手动的使用dispatchEvent()方法派发的事件。

现在我们就来实现：

source.ondragstart = function(evt){ ev.dataTransfer.setData("text/plain", ev.target.text); } target.ondrop=function(evt){ ev.preventDefault(); const data = ev.dataTransfer.getData("text"); ev.dataTransfer.clearData(); element.target.value=data; element.dispatchEvent(new Event('input')); }

【本文地址】

公司简介

联系我们